<template>
  <el-container>
    <el-header style="padding: 0; height: 100%" class="elheader">
      <div class="searchBox">
        <el-input
          v-model="listquery.key"
          size="small"
          suffix-icon="el-icon-search"
          class="einput"
        />
        <div class="daoButton" @click="download">
          <img src="@/assets/daochu.png" alt="" />
          <span>全部导出</span>
        </div>
      </div>
    </el-header>
    <el-dialog
      title="注意"
      :visible.sync="dialogVisible"
      width="30%"
      :append-to-body="true"
    >
      <span>确定通过吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="allow(row1)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="注意"
      :visible.sync="dialogVisibletwo"
      width="30%"
      :append-to-body="true"
    >
      <span>请填写拒绝理由：</span>
      <el-input
        :rows="2"
        placeholder="请输入内容"
        v-model="reason"
        class="eltextarea"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibletwo = false">取 消</el-button>
        <el-button type="primary" @click="refuse(row)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-main>
      <el-table
        :data="tableData"
        stripe
        border
        @sort-change="sortChange"
        v-loading="isloading"
        style="width: 100%"
        class="eltable"
      >
        <el-table-column label="序号" width="100" type="index" />
        <el-table-column prop="userName" label="单位名称" width="180" />
        <el-table-column prop="createTime" label="申请时间" sortable />
        <el-table-column prop="contactName" label="联系人" />
        <el-table-column prop="contactPhone" label="联系方式 " />
        <el-table-column prop="qualificationLevel" label="编制资质 " sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.qualificationLevel == 0">甲级</span>
            <span v-if="scope.row.qualificationLevel == 1">乙级</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320" fixed="right" >
          　<template slot-scope="scope">
            <el-button type="primary" plain icon="iconfont icon-attachment"   size="mini" @click="query(scope)"
              >查看附件</el-button
            >
            　　<el-button
               type="success"
             plain
             size="mini"
              icon="iconfont icon-tongguo"
              @click="openlog1(scope.row)"
              >通过</el-button
            >
            <el-button
              type="danger"
              plain
               size="mini"
              icon="iconfont icon-jujue1"
              @click="openlog(scope.row)"
              >拒绝</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <right-panel
        :obj="objv"
        v-if="rightPanelShow"
        @closeRightPanel="closeRightPane"
        @open="openlog1"
        @open1="openlog"
      ></right-panel>

      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getdata"
        @current-change="getdata"
        @prev-click="getdata"
        @next-click="getdata"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
    </el-main>
  </el-container>
</template>
<script>
import tableHeader from "../components/TableHeader";
import rightPanel from "../components/rightDiv";
import { getnolist,changeStatus } from "@/api/shenhe.js";

import { export_json_to_excel } from "@/utils/export2Excel.js";
export default {
  components: {
    tableHeader,
    rightPanel,
  },
  data() {
    return {
      listquery: {
        pageSize: 10,
        currentPage: 1,
        key: "",
        sortby: null,
        sortorder: null,
      },
      applylist: {
        id: "",
        status: "",
        message: "",
      },
      isShow: false,
      objv: null,
      isloading: false,
      reason: "",
      row: "",
      row1: "",
      name:"单位审核代办表",
      fileList: [],
      total: 0,
      dialogVisible: false,
      dialogVisibletwo: false,
      tableData: [],
      rightPanelShow: false,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    download() {
      let query = {
        pageSize: 99999,
        currentPage: 1,
        city: null,
        country: null,
        key: this.listquery.key,
      };
      getnolist(query).then((res) => {
        let tablelist = res.data.content;
        this.downloadExcel(tablelist);
      });
    },
   
    downloadExcel(tabledatalist) {
      let header = Object.keys(tabledatalist[0]);
      let list2 = [];
      for (var i = 0; i < tabledatalist.length; i++) {
        let list1 = [];
        for (var j = 0; j < header.length; j++) {
          let obj = tabledatalist[i];
          list1.push(obj[header[j]]);
        }
        list2.push(list1);
      }
      export_json_to_excel({
        header: header,
        data: list2,
        filename: "数据申请已办箱",
      });
    },
    async getdata() {
      this.isloading = true;
      let res = await getnolist(this.listquery);
      this.tableData = res.data.content;
      this.total =  res.data.totalElements;
      this.isloading = false;
    },
    //表格属性排序
    sortChange(data) {
      const { prop, order } = data;
      this.listquery.sortby = prop;
      this.listquery.sortorder = order;
      this.getdata();
    },
    query(scope) {
      this.rightPanelShow = true;
      this.objv = scope.row;
      let list1 = this.objv.qualificationFile;
      let list2 = this.objv.agreementFile;
      let list3 = this.objv.ndaFile;
      let treelist1 = [];
      let treelist2 = [];
      let treelist3 = [];
      if (list1) {
        list1 = list1.split(",");
        list1.forEach((element) => {
          let label = element.substring(element.lastIndexOf("/") + 1);
          let obj = {
            label: label,
            url: element,
          };
          treelist1.push(obj);
        });
      }
      if (list2) {
        list2 = list2.split(",");
        list2.forEach((element) => {
          let label = element.substring(element.lastIndexOf("/") + 1);
          let obj = {
            label: label,
            url: element,
          };
          treelist2.push(obj);
        });
      }
      if (list3) {
        list3 = list3.split(",");
        list3.forEach((element) => {
          let label = element.substring(element.lastIndexOf("/") + 1);
          let obj = {
            label: label,
            url: element,
          };
          treelist3.push(obj);
        });
      }
      this.objv.qualificationFiles = treelist1;
      this.objv.agreementFiles = treelist2;
      this.objv.ndaFiles = treelist3;
    },
    allow(row1) {
      this.applylist.id = row1.id;
      this.applylist.message = null;
      this.applylist.status = "1";
       changeStatus(this.applylist).then((v) => {
        if (v == "OK") {
          this.$notify({
            title: "成功",
            message: "已通过",
            type: "success",
          });
          this.getdata();
        } else {
          this.$notify.error({
            title: "错误",
            message: "发生错误",
          });
        }
      });
       this.dialogVisible1 = false;
    },
    refuse(row) {
      this.dialogVisible = false;
      this.applylist.id = row.id;
      this.applylist.message = this.reason;
      this.applylist.status = "1";
      changeapply(this.applylist).then((v) => {
        if (v == "OK") {
          this.$notify({
            title: "成功",
            message: "已拒绝",
            type: "success",
          });
          this.getdata();
        } else {
          this.$notify.error({
            title: "错误",
            message: "拒绝失败",
          });
        }
      });
    },
    openlog1(row) {
      this.row1 = row;
      this.dialogVisible = true;
    },
    openlog(row) {
      this.row = row;
      this.dialogVisibletwo = true;
    },

    closeRightPane() {
      this.rightPanelShow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../public/css/table.scss";

.eltextarea {
  margin-top: 15px;
}
</style>
